import { Component } from 'react'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import Global from '@/src/lib/global'
import Avatar from '@/src/components/avatar'
import OrderSection from './components/order-section'
import VIPSection from './components/vip-section'
import OtherSection from './components/other-section'
import Page from '@/src/components/page'
import { connect } from 'react-redux'
import Taro from '@tarojs/taro'

import { State } from '@/src/dva/state'
import { UserState } from '@/src/dva/models/user'
import Api from '@/src/lib/api/api'
import UserCenterModel from '@/src/lib/models/user_center_model';
import PageWarpper, { PageWarpperContext } from '@/src/components/page-warpper';
import { EventKey } from '@/src/consts'
import './index.scss'

interface MycenterProps {
    user: UserState,
    dispatch: any
}

interface MycenterState {
    centerModel?: UserCenterModel
}

class Mycenter extends Component<MycenterProps, MycenterState> {
    static contextType = PageWarpperContext
    constructor(props: MycenterProps) {
        super(props)
        this.state = {
        }
    }

    onLoad() {
        Taro.eventCenter.on(EventKey.LoginStatusChange, this.onLoginStatusChange)
    }
    
    onUnload() {
        Taro.eventCenter.off(EventKey.LoginStatusChange, this.onLoginStatusChange)
    }

    onLoginStatusChange = () => {
        if (Global.isLogin()) {
            this.requestData()
        } else {
            this.setState({
                centerModel: undefined
            })
        }
    }

    componentDidShow() {
        if (Global.isLogin()) {
            this.requestData()
        }        
    }

    requestData = () => {
        Api.userUserCenter().then((res) => {
            // console.log(res)
            if (!Api.handleResponse(res)) {
                return
            }
            console.log(res?.data)
            this.setState({
                centerModel: res?.data
            })
        })
    }

    onUserInfoClick = () => {
        const { user } = this.props
        const { loginCompentRef } = this.context
        if (!user.isLogin) {
            loginCompentRef.current.show()
            return
        }

        Global.navigateTo("/pages/material/index", {
            package: "subpackages"
        })
    }

    render() {
        const { user } = this.props
        const { centerModel } = this.state

        let vipTitle = ""
        if (user.isLogin) {
            vipTitle = centerModel?.cardtitle + "·享会员权益"
        } else {
            vipTitle = "加入会员·享会员优惠"
        }

        return (
            <Page navigationBar={{ title: "个人中心", backgroundColor: "#D2D0C3" }} fixed>
                <View className="mycenter">
                    <Image className="divider" src="http://r.punkyangsheng.com/xcx/img/images/divider1@3x.png"></Image>
                    <View className="scrollview-container">
                        <ScrollView className="scrollview" scrollY enhanced showScrollbar={false}>
                            <View className="content">

                                {/* 个人信息 */}
                                <View className="user-info" onClick={this.onUserInfoClick}>
                                    <Avatar url={user.userInfo ? user.userInfo.avatarurl :Global.loadImage("moren@3x.jpg")} />
                                    <Text className="name">{user.userInfo ? user.userInfo.nickname : '登录成为会员'}</Text>
                                </View>

                                {/* VIP */}
                                <VIPSection className="vip-section" vipTitle={ vipTitle } score={centerModel?.score} couponNum={centerModel?.coupon_num} />

                                {/* 订单 */}
                                <OrderSection className="section" centerModel={ this.state.centerModel }/>

                                {/* 其他服务 */}
                                <OtherSection className="section" />

                            </View>
                        </ScrollView>
                    </View>
                </View>
            </Page>
        )
    }
}

export default connect((state: State) => ({ user: state.user }))(PageWarpper()(Mycenter))
